<script  lang="ts">
import { defineComponent, reactive, watch, watchEffect } from "vue";
import RoomDetail from "./components/detail.vue";
import { IRoomDetailParams } from "@/api/interface";
import { useRoute } from "vue-router";
import { useStore } from "@/store";

export default defineComponent({
  components: {
    RoomDetail,
  },

  setup() {
    const route = useRoute();
    const store = useStore();
    // watch(
    //   () => route.params,
    //   (newVal, oldVal) => {
    //     store.dispatch("getRoomDetail", newVal);
    //   }
    // );
    watchEffect(() => store.dispatch("getRoomDetail", route.params));
  },

  asyncData({ store, route }: any) {
    console.log("asyncData== 详情页", store, route);
    const { roomId } = store.state;
    const { id } = route.value.params; //当前页面刷新时，获取当前路由的id
    // const {id} = store.state
    return store.dispatch("getRoomDetail", {
      id: roomId || id,
    } as IRoomDetailParams);
  },
});
</script>

<template>
  <RoomDetail />
</template>

<style></style>
